<template>
  <div class="goods-sku" v-if="specs">
    <dl v-for="(item, key) in list" :key="key">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="(it, k) in item.values">
          <span v-if="it.picture == null" :key="it.name" :class="{ selected: it.selected, disabled: it.disabled }"
            @click="select(key, k)">{{ it.name }}</span>
          <img :src="it.picture" v-if="it.picture" :key="it.name" alt=""
            :class="{ selected: it.selected, disabled: it.disabled }" @click="select(key, k)" />
        </template>
      </dd>
    </dl>
    <!-- <div class="xtx-numbox">
      <div class="label">数量</div>
      <div class="numbox">
        <a href="javascript:;" @click="num--" :disabled="true">-</a>
        <input type="text" v-model="num" readonly  />
        <a href="javascript:;" @click="num+=1">+</a>
      </div>
    </div>
    <button class="but" style="margin-top:20px;" @click="addCart">加入购物车</button> -->
  </div>
</template>

<script>
import { bwPowerSet } from "@/utils/constfun.js"
export default {
  props: ["specs", "skus"],
  data() {
    return {
      list: [], //长度和specs的长度是一样的
      yes:true,  //控制watch中函数只执行一次
      num:1
    };
  },

  mounted() { },
  watch: {
    specs: {
      handler() {
        if(this.yes){
          this.list = this.specs;
        var mapobj = this.getDataMap()
        // this.spexslist = this.specs
        //处理一下this.list 让每一个属性都在有效路径的对象中过一遍，同时添加disabled属性
        // 在有效字典中添加true 否则添加false
        this.list.forEach(item => {
          item.values.forEach(it => {
            //能在数据字典中找到不禁用 fales
            if (mapobj[it.name]) {
              it.disabled = false
            } else {
              //找不到就禁用
              it.disabled = true
            }
          })
        })
        this.yes= false
        }
     
      },
      deep: true,

    },
  },
  methods: {

    select(key, k) {
      if(this.list[key].values[k].selected){
        this.list[key].values[k].selected=!this.list[key].values[k].selected
        return false
      }
      this.list[key].values.forEach((item, index) => {
        this.$set(this.list[key].values[index], "selected", false);
      });
      //   console.log(this.spexslist);
      this.$set(this.list[key].values[k], "selected", true);
      //检查剩下的路径
      this.checkMap()
      //选择不同规格商品改变价格

      var arr = this.getSelectArr().filter(it=>it)
      const mapdata  = this.getDataMap()
      if(arr.length==this.list.length){
        //组合父组件要使用的数据
        var obj = {}
        //将路径拼成字符串
        var path = arr.join("*")
        //根据路径从字典中拿到id
        var skuid = mapdata[path][0]
        //根据id找到想要的数据
        var skuobj = this.skus.find(item=>item.id==skuid)
        obj.skuid = skuobj.id
        obj.inventory = skuobj.inventory
        obj.price = skuobj.price
        obj.oldPrice = skuid.oldPrice
        var str = ""
        skuobj.specs.forEach(item=>{
          str+= item.name+":"+item.valueName+""
        })
        obj.skuname = str
        this.$emit("send",obj)
      }
    },
    getDataMap() {
      let objmap = {};
      this.skus.forEach((item) => {
        if (item.inventory > 0) {
          const arr = item.specs.map(it => it.valueName);
          const allArr = bwPowerSet(arr);
          allArr.forEach(it => {
            var newname = it.join("*");
            if (objmap[newname]) {
              objmap[newname].push(item.id);
            } else {
              objmap[newname] = [item.id];
            }
          })
        }
      })
      return objmap;
    },
     //检查路径是否有禁用的按钮  点击的时候会被调用
     checkMap(){
      //拿到有效路径
      var objmap=this.getDataMap()
      //遍历所有的specs 然后已经选择就忽略  没有选择的拿到当前的undefined的位置进行比对看看是否为有效的路径
      this.list.forEach((item,key)=>{
           //需要拿到已经选中元素的数组 
      var selectArr=this.getSelectArr()
        item.values.forEach(it=>{
          //怎么知道it
          if(selectArr.includes(it.name)) return false
          //如果不存在让后面遍历的数据替换undefined
           selectArr[key]=it.name
           //将数组元素连城路径
           var path=selectArr.filter(v=>v).join("*")
           //将路径path拿到有效路径中去判断是否存在 然后再决定是否禁用
          if(objmap[path]){
            it.disabled=false
          }else{
            it.disabled=true
          }
        })
      })
    },
    //已经选中元素的数组  结构[] 元素的个数和specs的长度是一样的   怎么知道哪个元素被选中了呢
    getSelectArr(){
      var arr=[]
      this.specs.forEach((item,key)=>{
        var obj=item.values.find(it=>{return it.selected})
        arr[key]=obj?obj.name:undefined
      })
      return arr
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

@mixin sku-state-mixin {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;

  &.selected {
    border-color: $xtxColor;
  }

  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}

.goods-sku {
  padding-left: 10px;
  padding-top: 20px;

  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;

    dt {
      width: 50px;
      color: #999;
    }

    dd {
      flex: 1;
      color: #666;

      >img {
        width: 50px;
        height: 50px;
        @include sku-state-mixin;
      }

      >span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        @include sku-state-mixin;
      }
    }
  }
}

.xtx-numbox {
  display: flex;
  align-items: center;

  .label {
    width: 60px;
    color: #999;
    padding-left: 10px;
  }

  .numbox {
    width: 120px;
    height: 30px;
    border: 1px solid #e4e4e4;
    display: flex;

    >a {
      width: 29px;
      line-height: 28px;
      text-align: center;
      background: #f8f8f8;
      font-size: 16px;
      color: #666;

      &:first-of-type {
        border-right: 1px solid #e4e4e4;
      }

      &:last-of-type {
        border-left: 1px solid #e4e4e4;
      }
    }

    >input {
      width: 60px;
      padding: 0 5px;
      text-align: center;
      color: #666;
    }
  }
}

.but {
  width: 160px;
  height: 50px;
  background: $xtxColor;
  border: none;
  color: #fff;
  border-radius: 5px;
  font-size: 18px;
}
</style>